<template>
  <div ref="mapContainer" class="map_container"></div>
</template>

<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader'

const mapContainer = ref<HTMLDivElement | null>(null)
const map = shallowRef<AMap.Map | null>(null)
async function initMap() {
  const AMap = await AMapLoader.load({
    key: '4dcb50a8e2de4d42cab033cf7c9fb033',
    version: '2.0',
    plugins: ['']
  })
  AMap.plugin('AMap.Geolocation', () => {
    const geolocation = new AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 10000,
      // 定位按钮的停靠位置的偏移量
      offset: [10, 20],
      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: true,
      //  定位按钮的排放位置,  RB表示右下
      position: 'RB'
    })
    geolocation.getCurrentPosition(function (status: any, result: any) {
      console.log(status), 'status'
      if (status == 'complete') {
        // onComplete(result)
        console.log(result, 'result')
      } else {
        // onError(result)
      }
    })
  })

  const options = {
    //设置地图容器id
    viewMode: '3D', //是否为3D地图模式
    zoom: 10, //初始化地图级别
    center: [112.602725, 37.076636] //初始化地图中心点位置
  }
  map.value = new AMap.Map(mapContainer.value, options)
  let positionArr = [
    [113.357224, 34.977186],
    [114.555528, 37.727903],
    [112.106257, 36.962733],
    [109.830097, 31.859027],
    [116.449181, 39.98614]
  ]
  for (let item of positionArr) {
    let marker = new AMap.Marker({
      position: [item[0], item[1]]
    })
    map.value?.add(marker)
  }
}
onMounted(() => {
  initMap()
})
onBeforeUnmount(() => {
  map.value?.destroy()
})
</script>

<style scoped>
.map_container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
